
// 轮播
class Swiper {
    constructor(ele) {
        this.index = 0;
        this.timer = null;
        this.ele = $(ele);
        this.oUl = this.ele.find('ul')
        this.oLi = this.ele.find('ul li');
        this.width = $(this.oLi[0]).width();
        this.oDots = this.ele.find('ol li');
        this.flag = true;
    }

    // 自动播放
    autoPlay() {
        this.timer = setInterval(() => {
            this.index++;
            this.showOne();
        }, 3000)
    }

    showOne() {
        this.flag = false;
        this.oUl.animate({
            left: -this.index * this.width
        }, () => {
            this.flag = true;
            if (this.index >= this.oLi.length - 1) {
                this.index = 0;
                this.oUl.css('left', 0);
            }
        })
    }


    init() {
        this.ele.on('click', '.prev', () => {
            if (this.flag) {
                clearInterval(this.timer);
                if (this.index === 0) {
                    this.index = this.oLi.length - 1;
                    this.oUl.css('left', -this.index * this.width);
                }
                this.index--;
                this.showOne();
            }
        })

        this.ele.on('click', '.next', () => {
            // $('.next').on('click' , () => {
            if (this.flag) {
                clearInterval(this.timer);
                if (this.index === this.oLi.length - 1) {
                    this.index = 0;
                    this.oUl.css('left', -this.index * this.width);
                }
                this.index++;
                this.showOne();
            }
        })
    }
}

const bo = new Swiper('.banner');
bo.autoPlay();
bo.init();